import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card, Button, message } from 'antd'
import './custom.less'
class LoadingComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'message',
    }
    this.handle_confirm_1 = this.handle_confirm_1.bind(this)
    this.handle_confirm_2 = this.handle_confirm_2.bind(this)
    this.handle_confirm_3 = this.handle_confirm_3.bind(this)
    this.handle_confirm_4 = this.handle_confirm_4.bind(this)
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          {/*基础知识点*/}
          <CardWrap>
            <Card title="message">
              <p>1.类型success,error,warning</p>
              <p>2.自定义属性和内容style</p>
            </Card>
          </CardWrap>
          {/*类型提示*/}
          <CardWrap>
            <Card title="基础类型提示">
              <Button type="primary" onClick={this.handle_confirm_1}>
                Error
              </Button>
              <Button type="primary" onClick={this.handle_confirm_2}>
                Success
              </Button>
              <Button type="primary" onClick={this.handle_confirm_3}>
                Warning
              </Button>
            </Card>
          </CardWrap>
          {/*类型自定义样式*/}
          <CardWrap>
            <Card title="自定义类型样式">
              <Button type="primary" onClick={this.handle_confirm_4}>
                自定义样式
              </Button>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
  handle_confirm_1() {
    message.error('对不起失败了')
  }
  handle_confirm_2() {
    message.success('恭喜您成功了')
  }
  handle_confirm_3() {
    message.warning('这就是个警告框')
  }
  handle_confirm_4() {
    message.success({
      content: '这就是内容,10s后自动消失',
      className: 'custom-class',
      style: {
        marginTop: '20vh',
      },
      duration: 10,
    })
  }
}

export default LoadingComponent
